<template>
<div class="app">
  <h3>我是App组件</h3>
  <Suspense>
    <template v-slot:default>
      <Child/>
    </template>
    <template v-slot:fallback>
      <h3>加载中...</h3>
    </template>
  </Suspense>
</div>
</template>

<script>
import { reactive, toRefs } from 'vue'
// import Child from './components/Child' // 静态引入
import { defineAsyncComponent } from 'vue' // 动态引入 / 异步引入
const Child = defineAsyncComponent(() => import('./components/Child.vue'))
export default {
  name: 'App',
  components: {Child},
  setup() {
    let car = reactive({name: '奔驰',price: '40W'})
    return {...toRefs(car)}
  }
}
</script>
<style>
.app {
  background-color: gray;
  padding: 10px;
}
</style>
